<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2024-07-10 17:07:37
 * @LastEditTime: 2024-07-12 10:06:43
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 
 * @FilePath: \chu-meng\client\src\pages\Design\components\DesignArea\DragDesignArea\DragWrapper\index.vue
 * Copyright 版权声明
-->
<template>
  <div class="drag-wrapper">
    <div class="drag-wrapper__border"></div>
    <div class="drag-wrapper__container">
      <slot name="default"></slot>
    </div>
  </div>
</template>
<script setup></script>
<style lang="scss" scoped>
.drag-wrapper{
  display: inline-block;
  position: relative;
  .drag-wrapper__border{
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
  }
  .drag-wrapper__container{
  }
  &:hover{
    .drag-wrapper__border{
      border: 1px dashed #0079f2;
      // pointer-events: none;
      background: rgba($color: #000000, $alpha: .1);
      z-index: 1;
    }
    .drag-wrapper__container{
    }
  }
  &:active{
    .drag-wrapper__border{
      cursor: move;
    }
    .drag-wrapper__container{
    }
  }
  &.selected{
    .drag-wrapper__border{
      border: 1px solid #0079f2;
      z-index: 2;
    }
    .drag-wrapper__container{
    }
  }
}
</style>